<template>
  <div>
    <!--1视图-->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          label="字典id"
          prop="id"
          width="150">
      </el-table-column>
      <el-table-column
          label="字典名称"
          prop="name"
          width="150">
      </el-table-column>
      <el-table-column
          label="路径"
          prop="url"
          width="200">
        <template v-slot="scope">
          <a style="color: #c1a375;font-size: 17px" @click="getContent(scope.row.id)">{{ scope.row.url }}</a>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          width="150">
      </el-table-column>
      <el-table-column
          label="备注"
          prop="remark"
          width="180">
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createdDate"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="show(scope.row)">
            <span style="color: #fdba34;font-size: 20px">
            <i class="el-icon-share"></i>
            </span>
          </el-button>
          <el-button size="small" type="text" @click="show(scope.row)">
            <span style="color: #c7a353;font-size: 20px">
            <i class="el-icon-menu"></i>
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "DictionaryView",
  data() {
    return {
      tableData: [],
      //2属性定义
    }
  }, methods: {
    getContent(id) {
      sessionStorage.setItem("dictId", id);
      this.$router.push("/content");
    },
    list() {
      this.axios.post("dictionaryservice/dictionary/list").then(res => {
        this.tableData = res.data.data;
      })
    },
    //3自定义方法

  }, created() {
    this.list();
    //4.钩子函数
  }
}
</script>

<style scoped>

</style>